import React, {
  ChangeEvent,
  CSSProperties,
  ReactElement,
  ReactNode,
  useContext,
} from 'react';
import FormContext from '../Form/FormContent';
export interface ItemProps {
  className?: string;
  style?: CSSProperties;
  label?: ReactNode;
  name?: string;
  valuePropName?: string;
  rules?: Array<Record<string, any>>;
  children?: ReactElement;
}
const getValueFromEvent = (e: ChangeEvent<HTMLInputElement>) => {
  const { target } = e;
  if (target.type === 'checkbox') {
    return target.checked;
  } else if (target.type === 'radio') {
    return target.value;
  }

  return target.value;
};
const Item = (props: ItemProps) => {
  const { name, label } = props;
  const { onValueChange } = useContext(FormContext);
  const { children } = props; // 解构并使用默认值
  const childEle = React.cloneElement(children, {
    onChange: (e: any) => {
      const value = getValueFromEvent(e);
      console.log('value', value);
      onValueChange?.(name, value);
    },
  });
  return (
    <div>
      <span>{label}</span> <span>{childEle}</span>
    </div>
  );
};
export default Item;
